<template>
  <el-container class="all">
    <div class="topbar">
      <div class="nav">
        <label for="" class="el-icon-location-information Positioning">
          {{ Positioning }}
        </label>
        <ul>
          <!-- 登录后再写这个 -->
          <li
            v-if="nickname"
            style="margin-right: 10px; width: 44px; float: right"
          >
            <el-dropdown placement="bottom" trigger="click">
              <span class="el-dropdown-link">
                {{ nickname }}
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>设置</el-dropdown-item>
                <el-dropdown-item @click.native="frontlogout"
                  >注销</el-dropdown-item
                >
                <el-dropdown-item>帮助</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </li>
          <li
            style="margin-right: 0px; width: 44px; float: right"
            v-if="nickname"
          >
            <el-avatar
              src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
            ></el-avatar>
          </li>
          <!-- 登录注册按钮 -->
          <li v-else>
            <button
              type="button"
              @click="dialogVisible = true"
              class="el-button el-button--text"
            >
              <span> 登录 </span>
            </button>
            <span class="sep">|</span>
            <button
              type="button"
              @click="dialogVisible1 = true"
              class="el-button el-button--text"
            >
              <span>注册</span>
            </button>
          </li>
          <!-- 去往订单页 -->
          <li @click="toOrder">
            <a href="/order" class="">
              <i class="el-icon-document-checked"></i>
              我的订单
            </a>
          </li>
          <!-- 去往收藏页 -->
          <li @click="tocollect">
            <a href="/collect" class="">
              <i class="el-icon-star-off"></i>
              我的收藏
            </a>
          </li>
          <!-- 去往购物车页 -->
          <li class="shopCart" @click="toShoppingCart">
            <a href="/shoppingCart" class="">
              <i class="el-icon-shopping-cart-full"></i>
              购物车
            </a>
          </li>
        </ul>
      </div>
    </div>
    <header class="el-header" style="height: 60px">
      <img src="../assets/favicon2.jpeg" alt="" />
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <!-- 导航栏 -->
        <el-menu
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="horizontal"
          text-color="black"
          active-text-color="#175391"
          router
        >
          <el-menu-item index="1" route="index">首页</el-menu-item>
          <el-menu-item index="2" route="all">全部商品</el-menu-item>
          <el-menu-item index="3" route="about">关于我们</el-menu-item>
        </el-menu>
        <div class="so" tabindex="0">
          <div
            class="el-input el-input-group el-input-group--append"
            v-show="ishidden"
          >
            <input
              type="text"
              autocomplete="off"
              placeholder="请输入搜索内容"
              class="el-input__inner"
              style="border: solid 1px #eeeeee"
            />
            <div class="el-input-group__append">
              <button type="button" class="el-button el-button--default">
                <i class="el-icon-search"></i>
              </button>
            </div>
          </div>
        </div>
      </el-tabs>
    </header>
    <el-main>
      <router-view></router-view>
    </el-main>
    <el-footer>
      <div style="width: 300px; margin: 0 auto; padding: 20px 0">
        <img src="../assets/备案图标(1).png" alt />
        <a
          target="_blank"
          href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=35018202000233"
          style="
            display: inline-block;
            text-decoration: none;
            height: 20px;
            line-height: 20px;
          "
        >
          <p
            style="
              float: left;
              height: 20px;
              line-height: 20px;
              margin: 0px 0px 0px 5px;
              color: #939393;
            "
          >
            闽公网安备35018202000233号
          </p>
        </a>
        <a
          target="_blank"
          href="https://beian.miit.gov.cn/#/Integrated/recordQuery"
          style="
            display: inline-block;
            text-decoration: none;
            height: 20px;
            line-height: 20px;
          "
        >
          <p
            style="
              float: left;
              height: 20px;
              line-height: 20px;
              margin: 0px 0px 0px 5px;
              color: #939393;
            "
          >
            闽ICP备2020020768号
          </p>
        </a>
      </div>
    </el-footer>

    <!-- 登录、注册模态框 -->
    <el-dialog
      title="登录"
      :visible.sync="dialogVisible"
      width="28%"
      :before-close="handleClose"
    >
      <el-form :model="formdata">
        <el-form-item label="账号" :label-width="formLabelWidth">
          <el-input v-model="formdata.Name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" :label-width="formLabelWidth">
          <el-input v-model="formdata.Password"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="frontlogin"> 确 定 </el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="注册"
      :visible.sync="dialogVisible1"
      width="28%"
      :before-close="handleClose"
    >
      <el-form :model="formdata1">
        <el-form-item label="账号" :label-width="formLabelWidth">
          <el-input v-model="formdata1.Name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" :label-width="formLabelWidth">
          <el-input v-model="formdata1.Password" autocomplete="off" text="password"></el-input>
        </el-form-item>
        <el-form-item
          class="Tpwd"
          label="确认密码"
          :label-width="formLabelWidth"
        >
          <el-input v-model="formdata1.Tpwd" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="frontregister"> 确 定 </el-button>
      </span>
    </el-dialog>
  </el-container>
</template>

<script>
import { login, addUser } from "../api/user";
import {
  SetToken,
  getUsername,
  ClearToken,
  clearUsername,
} from "../utils/auth";

export default {
  data() {
    return {
      activeName: "second",
      Positioning: "",
      dialogVisible: false,
      dialogVisible1: false,
      formLabelWidth: "15px",
      activeIndex: "",
      ishidden: true,
      formdata: {
        Name: "",
        Password: "",
      },
      formdata1: {
        Name: "",
        Password: "",
        Tpwd: "",
      },
      nickname: "",
    };
  },
  methods: {
    //登录
    frontlogin: function () {
      this.dialogVisible = true;

      login(this.formdata)
        .then((res) => {
          console.log(res);
          if (res.code === 1000) {
            this.$message({ type: "success", message: res.msg });
            this.dialogVisible = false;
            location.reload();
            localStorage.setItem("name", res.data.user.name);
            localStorage.setItem("id",res.data.user.id);
            SetToken(res.data.token, res.data.refreshToken);
          } else {
            this.$message({ type: "error", message: res.msg });
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //注册
    frontregister: function () {
      this.dialogVisible1 = true;
      console.log(this.formdata1);
      if (this.formdata1.Password === this.formdata1.Tpwd) {
        addUser(this.formdata1)
          .then((res) => {
            console.log(res);
            if (res.code === 1000) {
              this.$message({ type: "success", message: res.msg }),
                (this.dialogVisible1 = false);
              this.formdata1.Name = "";
              this.formdata1.Password = "";
              this.formdata1.Tpwd = "";
            } else {
              this.$message({ type: "error", message: res.msg });
            }
          })
          .catch((res) => {
            console.log(res);
          });
      } else {
        alert("请检查两次密码是否一致");
      }
    },
    //注销
    frontlogout: function () {
      ClearToken();
      clearUsername();
      location.reload();
    },
    //去商品购物车
    toShoppingCart: function () {
      this.$router.push("shoppingCart");
    },
    //去我的订单
    toOrder() {
      this.$router.push("order");
    },
    //去我的收藏
    tocollect() {
      this.$router.push("collect");
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    //关闭
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(() => {
          done();
        })
        .catch(() => {});
    },
  },
  updated() {
    if (
      this.$router.history.current.path !== "/index" &&
      this.$router.history.current.path !== "/all"
    ) {
      this.ishidden = false;
    } else {
      this.ishidden = true;
    }
    if (this.$router.history.current.path === "/index") {
      this.activeIndex = "1";
    } else {
      if (this.$router.history.current.path === "/all") {
        this.activeIndex = "2";
      } else {
        if (this.$router.history.current.path === "/about") {
          this.activeIndex = "3";
        } else {
          this.activeIndex = "";
        }
      }
    }
  },

  mounted() {
    //左上角获取实时定位
    var data = {
      key: "EDDBZ-BYXL3-WSF3C-3RWXI-NCV46-ZEBZ4", //这个key就是你申请的密钥
    };
    var url = "https://apis.map.qq.com/ws/location/v1/ip"; //这个就是地理位置信息的接口
    data.output = "jsonp";
    this.$jsonp(url, data)
      .then((res) => {
        console.log(res);
        this.Positioning = res.result.ad_info.city;
      })
      .catch((error) => {
        console.log(error);
      });
    this.index;

    this.nickname = getUsername();
  },
};
</script>

<style>
* {
  margin: 0;
  border: none;
  list-style: none;
}
.all {
  min-height: 100vw !important;
}
.el-backtop {
  float: right !important;
  background-color: red !important;
}
.Positioning {
  line-height: 40px;
  color: #b0b0b0 !important;
  font-size: 15px;
  margin-left: 10px;
}
a,
a:hover {
  text-decoration: none;
}
.topbar {
  height: 40px;
  background-color: #3d3d3d;
  margin-bottom: 20px;
}
.topbar .nav {
  margin: 0 auto;
}
.topbar .nav ul {
  float: right;
}
.topbar .nav li {
  float: left;
  height: 40px;
  color: #b0b0b0;
  font-size: 14px;
  text-align: center;
  line-height: 40px;
  margin-right: 10px;
}

.topbar .nav .sep {
  color: #b0b0b0;
  font-size: 12px;
  margin: 0 5px;
}
.topbar .nav li .el-button {
  color: #b0b0b0;
}
.topbar .nav .el-button:hover {
  color: #fff;
}
.topbar .nav li a {
  color: #b0b0b0;
}
.topbar .nav a:hover {
  color: #fff;
}
.topbar .nav li {
  width: 80px;
}
.topbar .nav li:hover {
  background: #b0b0b010;
}
.el-header {
  padding: 0px !important;
}
.el-header .el-menu {
  margin-bottom: 10px !important;
  margin: 0 auto;
}
.el-header img {
  float: left;
  width: 100px;
  margin: 0px;
}
.el-tabs {
  width: 92%;
  margin-left: 100px;
}
.el-header .logo {
  height: 62px;
  width: 75px;
  float: left;
  margin-right: 10px;
}
.el-header .so {
  margin-top: 10px;
  width: 300px;
  float: right;
}
.el-main {
  padding: 0px;
  margin-top: 40px;
}
.el-footer {
  background-color: #3d3d3d;
  height: 80px !important;
  text-align: center;
}
.el-header .so {
  margin-top: auto;
  width: 300px;
  float: right;
}
.el-form-item {
  margin-top: 15px;
}
.el-form-item__label {
  width: 80px !important;
  font-size: 17px !important;
}
.all .el-input {
  margin-left: 20px !important;
  width: 280px;
}
.Tpwd label {
  margin-left: 10px !important;
}
.el-checkbox__input.is-checked + .el-checkbox__label {
  color: black;
}
</style>
